<template>
  <div class="box_yj" ref="parent" style="position:relative">
    <span></span>
      <div class="sq-title">最新政策</div>
      <el-radio-group v-model="radio" size="mini" style="position: absolute;top:20px;right:8%" class="radio-group">
      <el-radio-button label="科技专题"></el-radio-button>
      <el-radio-button label="医疗资讯"></el-radio-button>
        </el-radio-group>
      <div :style="chartsDom" v-show="jz3">
        <swiper :options="swiperOption2" ref="mySwiper" v-if="data1.length" :style="chartsDom">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in data1" :key="index">
           <el-row class="data1-item">
              <el-col  class="rank-value">
                <span v-if="index < 2 || index === 2" style="top: 4px;">{{item.Number}}</span>
                <span v-else>{{item.Number}}</span>
              </el-col>
              <el-col  style="width:74%;verflow: hidden;text-overflow ellipsis">
                <span class="data1-item-text middle-align" v-if="index < 2 || index === 2">
                  <span :class="`rank-icon rank-icon-${index+1}`"></span>
                  <span>{{item.JobName}}</span>
                </span>
                <span class="data1-item-text" v-else>
                  <span class="rank-icon">{{index+1}}</span>
                  <span>{{item.JobName}}</span>
                </span>
              </el-col>
            </el-row>
          </swiper-slide>
        </swiper>
      </div>
             <animae-jz  :style="chartsDom" v-if="!jz3"></animae-jz>
    </div>
</template>
<script>
import {
  get_JobTable_JobSupplyTop10,
  get_JobTable_TalentGapTop10,
  get_JobTable_ProportionIndustry
} from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      radio:'科技专题',
      data1: [
        {
        JobName:'环评报告抄袭、威胁10万水鸟生存 深圳湾新航道引争议',
        Number:'2020-04-12'
        },
        {
        JobName:'瑞德西韦临床试验结果来了！“明星药”疗效如何？',
        Number:'2020-04-12'
        },
        {
        JobName:'中东部雨水停歇 气温飙升重回20℃以上',
        Number:'2020-04-12'
        },
        {
        JobName:'疫情及其防控措施给当事人造成损失怎么办？专家详解',
        Number:'2020-04-10'
        },
        {
        JobName:'莫斯科疫情恶化 市长：13日起将逐步实行通行证制度',
        Number:'2020-04-09'
        },
        {
        JobName:'再下一城！拜登赢得美国阿拉斯加州民主党总统初选',
        Number:'2020-04-08'
        },
        {
        JobName:'道德绑架or用脚投票：海底捞、西贝涨价的两难困境',
        Number:'2020-04-07'
        },
        {
        JobName:'培训机构课程报名费可“分期付款”？实为金融借贷',
        Number:'2020-04-06'
        },
        {
        JobName:'K7384次列车在锦州至承德间2辆车脱线 无人员伤亡',
        Number:'2020-04-05'
        }

      ],
      data2: [],
      data3: null,
      data4:[
      ],
      jz:true,
      jz2:true,
      jz3:true,
      swiperOption2:{
        autoplay:{
          delay:3000
        },
        direction:'vertical'
      }
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return 0
      },
      set(val) {
        this.chartsDom = {
        width: val-60 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red',
        'overflow': 'hidden',
        'left': '-6px'
      }
      }
    },
    data3ValueTotal() {
      return eval(this.data3.map(v=>v.value).join('+'))
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
    //     this.jz3=false
    //   get_JobTable_JobSupplyTop10(this.dateProp)
    //   .then(({data:{data}})=>{
    //     this.jz3=true
    //     this.data1 = data.length>0? data:[];
	// 	console.log('get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10')
	// 	console.log(this.data1)
    //   })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
    
  .data1-item
    margin-top 15px
    display flex
    white-space nowrap
    color #8ebafb
    font-size 14px
    position relative
    .data1-item-text
      padding-left 15px
    .middle-align *
      vertical-align middle
    .rank-value
      text-align right
      display inline-block
      width 26%
      padding-right 15px
      position relative
      span
        position relative
    .name-item{
      width 120%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .rank-icon
      color #fff
      &.rank-icon
        width 18px
        height 24px
        background-size 100% auto
        display inline-block
        position relative
        &-1
          background url(../../../assets/images/rank-01.png) no-repeat
          left -4px
        &-2
          background url(../../../assets/images/rank-02.png) no-repeat
          left -4px
        &-3
          background url(../../../assets/images/rank-03.png) no-repeat
          left -4px
    .swiper-container{
      height auto !important 
    }
    .radio-group
    position absolute
    right 30px
    top 70px
    z-index 1000
    .el-radio-button.is-active .el-radio-button__inner
      background-color #037880
      color #ffffff
      box-shadow -1px 0 0 #037880
      padding 5px 10px !important
    .el-radio-button__inner
      background-color transparent !important
      color #35ced8
      border 1px solid #037880
      padding 5px 10px !important
</style>